<!--
 * @LastEditTime : 2022-11-03 16:30:41
 * @FilePath     : /pyy/src/views/equipment/detail-enclosure/index.vue
 * @Description  : 设备计量 > 设备计量校准详情 > 查看证书(设备附件查看页面)
-->
<template>
  <div id="detail-enclosure">
    <van-nav-bar title="查看证书" left-arrow @click-left="goBack" v-show="!isShow"></van-nav-bar>
    <div id="preview" v-show="isShow">
    <van-nav-bar class="checkTheCertificate" title="证书详情" left-arrow @click-left="goBackList"></van-nav-bar>
    <div class="htmlBox" >
      <div v-html="this.htmlText"></div>
    </div>   
      </div>
    <div class="container" v-show="!isShow">
      <van-list
        v-model="loading"
        :finished="finished"
        :finished-text="finishedText"
        :offset="100"
        @load="onLoad"
      >
        <div
          class="list-item"
          v-for="(item, index) in list"
          :key="'list-item_' + index"
          @click="openZs(item.id)"
        >
          <span class="list-item_label">{{ item.fileName }}</span>
          <svg-icon name="arrow_right" />
        </div>
      </van-list>
     
    </div>
  </div>
</template>

<script>
import { Toast } from "vant";
import api from "@/http/api";

export default {
  name: "EquipmentDetailEnclosure",
  data() {
    return {
      queryParams: {
        // 设备id
        id: null,
        // 分页
        page: 1,
        size: 5,
      },
      htmlText:'',
      isShow:false,
      zsbl: "",
      loading: false,
      total: 0,
      list: [
        // {
        //   fileName: "附件1XXXXXX",
        // },
        // {
        //   fileName: "附件2XXXXXX",
        // },
        // {
        //   fileName: "附件3XXXXXX",
        // },
      ],
    };
  },
  computed: {
    // 是否已加载完成
    finished() {
      return this.list.length >= this.total;
    },
    // 加载完成后的提示文案
    finishedText() {
      return this.list.length ? "没有更多了" : "暂无数据";
    },
  },
  created() {
    const id = this.$route.query.id;
    if ([null, undefined, ""].includes(id)) {
      Toast.fail("参数异常");
      this.goBack();
      return;
    }
    this.queryParams.id = id;
    this.getList();
  },
  mounted() {
    document.getElementById('preview').style.width = window.screen.width +'px'
  },
  methods: {
    // 查看证书
    openZs(id) {     
      // 查看证书详情
      // var id = 7270235005273197574;
     
      const toast = Toast.loading({
        duration: 0,
        forbidClick: true,
      });
      api.equipment
        .checkTheCertificateDetails(id)
        .then((res) => {
          const { code, data, msg } = res.data || {};
          if (code !== 200) return Toast.fail(msg);
          // console.log('设备详情data :>> ', data);
          this.htmlText = data
          this.isShow = true
        })
        .finally(() => {
          setTimeout(toast.clear, 500);
        });

    },
    /**
     * 返回上一页
     */
    goBack() {
      // this.$route.params.user = "123";
      // this.$router.back();
      this.$router.push({path: `/equipment/detail?id=${this.$route.query.dataId}`, query:{index:this.$route.query.indexNum}})
    },
    goBackList(){
      this.isShow = false
    },

    /**
     * 加载数据
     * @desc: 滚动条与底部距离小于 offset 时触发
     */
    onLoad() {
      this.queryParams.page++;
      this.getList();
    },

    /**
     * 获取列表信息
     */
    getList() {
      this.loading = true;
      const toast = Toast.loading({
        duration: 0,
        forbidClick: true,
      });
      api.equipment
        .getEnclosure(this.$route.query.id,this.$route.query.ywdh,this.$route.query.wtdh)
        .then((res) => {
          const { code, data, msg } = res.data || {};
          if (code !== 200) {
            this.list = [];
            Toast.fail(msg || "加载失败");
            return;
          }
      
          this.list = data;
          this.total = data.length;
        })
        .finally(() => {
          setTimeout(toast.clear, 500);
          this.loading = false;
        });
    },
  },
};
</script>

<style lang="less" scoped>

#preview{
    position: absolute;
    height: 100%;
    background-color: #fff;
    overflow: hidden;
    img{
        width: 100%;
    }
    .htmlBox{
      overflow: auto;
     height: 100%;
     /deep/ img{
      width: 100%;
     }
    }
}
#detail-enclosure {
  width: 100vw;
  height: 100vh;
  background-color: #f5f5f5;
  display: flex;
  flex-direction: column;

  /deep/ .van-nav-bar {
    .van-nav-bar__title {
      font-family: "Inter";
      font-style: normal;
      font-weight: 600;
      font-size: 18px;
      line-height: 20px;
      text-align: center;
      letter-spacing: -0.24px;
      color: #333333;
    }

    .van-nav-bar__content {
      .van-nav-bar__left {
        i {
          font-size: 20px;
          color: #999999;
        }
      }
    }
  }

  .container {
    width: 100%;
    height: 0;
    flex: 1;
    overflow-y: auto;
    box-sizing: border-box;
    padding: 0 12px;

    .list-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 8px;
      background: #ffffff;
      border-radius: 4px;
      box-sizing: border-box;
      padding: 12px;

      span {
        font-family: "Inter";
        font-style: normal;
        font-weight: 400;
        font-size: 16px;
        line-height: 24px;
        color: #393939;
      }

      .svg-icon {
        width: 12px;
        height: 12px;
      }
    }
  }
}
</style>
